<template>
  <!-- 分类标签栏 -->
  <a-tabs v-model:activeKey="activeKey" type="editable-card" @edit="onEdit">
    <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
      <UploadImage v-model:value="pane.content" />
    </a-tab-pane>
  </a-tabs>
  <!-- 对话框 -->
  <a-modal v-model:open="open" title="新增分类" :footer="null" @cancel="handleClose">
    <a-form ref="formRef" :model="formState" :rules="rules" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
      <a-form-item ref="name" label="分类名称" name="name">
        <a-input v-model:value="formState.name" placeholder="请填写分类名称" />
      </a-form-item>
      <a-form-item class="submit-item">
        <a-button type="primary" block @click="handleSubmit">确定</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import { reactive, ref, watch } from "vue"
import type { Rule } from "ant-design-vue/es/form"
import UploadImage from "./upload-image.vue"
// props
interface UploadProps {
  value: any[]
}
const props = defineProps<UploadProps>()
// emit
const $emit = defineEmits(["update:value"])

// tab
const panes = ref<{ title: string; content: any[]; key: string; closable?: boolean }[]>(props.value)
const activeKey = ref(panes.value[0].key)
watch(
  props,
  newVal => {
    panes.value = newVal.value
  },
  {
    deep: true
  }
)
watch(panes, () => {
  $emit("update:value", panes.value)
})
//form
const open = ref<boolean>(false)
const formState = reactive({
  name: ""
})
const formRef = ref()
const validateName = async (_rule: Rule, value: string) => {
  let index = panes.value.findIndex(item => item.title == value)
  if (index != -1) {
    return Promise.reject("该分类名称已存在")
  } else {
    return Promise.resolve()
  }
}
const rules: Record<string, Rule[]> = {
  name: [
    { required: true, message: "请输入分类名称", trigger: "blur" },
    { min: 1, max: 12, message: "姓名长度为 2至24", trigger: "blur" },
    { validator: validateName, trigger: "blur" }
  ]
}

const remove = (targetKey: string) => {
  let lastIndex = 0
  panes.value.forEach((pane, i) => {
    if (pane.key === targetKey) {
      lastIndex = i - 1
    }
  })
  panes.value = panes.value.filter(pane => pane.key !== targetKey)
  if (panes.value.length && activeKey.value === targetKey) {
    if (lastIndex >= 0) {
      activeKey.value = panes.value[lastIndex].key
    } else {
      activeKey.value = panes.value[0].key
    }
  }
}

const onEdit = (targetKey: string | MouseEvent, action: string) => {
  if (action === "add") {
    open.value = true
  } else {
    remove(targetKey as string)
  }
}

const handleSubmit = () => {
  formRef.value.validate().then(() => {
    activeKey.value = formState.name
    panes.value.push({ title: formState.name, content: [], key: activeKey.value })
    open.value = false
    handleClose()
  })
}

const handleClose = () => {
  formState.name = ""
}
</script>
<style lang="scss" scoped>
.ant-form {
  margin: 48px 0 24px;
}
:deep(.ant-form-item-label label) {
  font-size: 12px;
}
:deep(.submit-item .ant-row) {
  display: flex;
  justify-content: center;
}
</style>
